<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			body {
				font-family: Arial, sans-serif;
				background-color: #f4f4f4;
				margin: 0;
				padding: 0;
			}

			.hasLogin, .login {
				width: 300px;
				margin: 100px auto;
				background-color: #fff;
				border: 1px solid #ddd;
				border-radius: 5px;
				padding: 20px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			}

			.hasLogin h3, .login h1 {
				text-align: center;
				color: #333;
			}

			.login div {
				margin-bottom: 15px;
			}

			.login input[type="text"], .login input[type="password"] {
				width: 100%;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 3px;
				box-sizing: border-box;
			}

			.login button {
				width: 100%;
				padding: 10px;
				background-color: #007BFF;
				color: #fff;
				border: none;
				border-radius: 3px;
				cursor: pointer;
				transition: background-color 0.3s;
			}

			.login button:hover {
				background-color: #0056b3;
			}

			.login label {
				display: block;
				margin-bottom: 5px;
				color: #555;
			}

			.login textarea {
				width: 100%;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 3px;
				box-sizing: border-box;
			}

			.login select {
				width: 100%;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 3px;
				box-sizing: border-box;
			}

			.login input[type="radio"], .login input[type="checkbox"] {
				margin-right: 5px;
			}

			@media (max-width: 600px) {
				.hasLogin, .login {
					width: 90%;
				}
			}
		</style>
	</head>
	<body>
		<!-- 
			完整地注册登录
			
			1.注册
			用户名	密码		重复密码		
			性别		年龄		爱好		学历
			用户简介
			
			注册按钮		登录按钮
		 -->
		<div id="app">
			<div class="login">
				<button @click="loginPage" v-if="!isLogin && !isRegister">登录</button>
				<button @click="registerPage" v-if="!isLogin && !isRegister">注册</button>
			</div>
			<div class="login" v-if="isLogin">
				<h1>用户登录</h1>
				<div>
					用户名：<input type="text" v-model="username"/>
				</div>
				<div>
					密码：<input type="text" v-model="userpwd"/>
				</div>
				<div>
					重复密码：<input type="text" v-model="userpwd2"/>
				</div>
				<div>
					<button @click="login">登录</button>
				</div>
			</div>
			<div class="login" v-if="isRegister && !hasLogin">
				<h1>用户注册</h1>
				<div>
					用户名：<input type="text" v-model="username"/>
				</div>
				<div>
					密码：<input type="text" v-model="userpwd"/>
				</div>
				<div>
					重复密码：<input type="text" v-model="userpwd2"/>
				</div>
				<div>
					性别：
					男<input type="radio" v-model="usersex" value="男"/>
					女<input type="radio" v-model="usersex" value="女"/>
				</div>
				<div>
					年龄：<input type="text" v-model="userage"/>
				</div>
				<div>
					爱好：
					<input type="checkbox" v-model="userlikes" value="听音乐">听音乐
					<input type="checkbox" v-model="userlikes" value="唱歌">唱歌
					<input type="checkbox" v-model="userlikes" value="打游戏">打游戏
					<input type="checkbox" v-model="userlikes" value="看电影">看电影
				</div>
				<div>
					学历：
					<select v-model="userstudy">
						<option value="" disabled>选择学历</option>
						<option>初中</option>
						<option>高中</option>
						<option>大专</option>
						<option>本科</option>
					</select>
				</div>
				<div>
					用户简介：<textarea v-model="userintroduce" rows="3" cols="40"></textarea>
				</div>
				<div>
					用户协议：<textarea disabled rows="3" cols="40">这是一段用户协议</textarea>
					我已阅读<input type="checkbox" />
					我将遵守<input type="checkbox" />
				</div>
				<div>
					<button @click="register">注册</button>
				</div>
			</div>
			<div class="hasLogin" v-if="hasLogin">
				<h3>已注册！</h3>
				用户名：{{username}}<br />
				密码：{{userpwd}}<br />
				性别：{{usersex}}
				年龄：{{userage}}<br />
				爱好：{{userlikes}}<br />
				学历：{{userstudy}}<br />
				个人简介：{{userintroduce}}<br />
				<button @click="loginOut">登出</button>
			</div>
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						username: '',
						userpwd: '',
						userpwd2: '',
						usersex: '',
						userage: '',
						userlikes: [],
						userstudy: '',
						userintroduce: '',
						isLogin: false,
						isRegister: false,
						hasLogin: false
					}
				},
				methods:{
					loginPage:function(){
						this.isLogin = true
					},
					registerPage:function(){
						this.isRegister = true
					},
					login:function(){
						var cookieArr = document.cookie.split(";")
						console.log(cookieArr[0])
						console.log(cookieArr[1])
						if('local_username = ' + this.username == cookieArr[0] && ' local_userpwd = ' + this.userpwd == cookieArr[1]){
							this.hasLogin = true
							this.isLogin = false
						}
					},
					register:function(){
						this.hasLogin = true
						// 设定过期时间
						var now = new Date();
						// 三分钟过期
						now.setMinutes(now.getMinutes()+3);
						document.cookie = 'local_username = ' + this.username + ';expires = ' + now.toGMTString();
						document.cookie = 'local_userpwd = ' + this.userpwd + ';expires = ' + now.toGMTString();
					},
					loginOut:function(){
						this.isLogin = false
						this.isRegister = false
						this.hasLogin = false
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
